// All of our block level items should have the same margin
// stylelint-disable selector-max-type

// This is styling for generic markdownized text. Anything you put in a
// container with .markdown-body on it should render generally well. It also
// includes some GitHub Flavored Markdown specific styling (like @mentions)
.markdown-body {
  font-family: $body-font;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;

  img {
    height: auto;
  }

  // Clearfix on the markdown body
  &::before {
    display: table;
    content: "";
  }

  &::after {
    display: table;
    clear: both;
    content: "";
  }

  > *:first-child {
    margin-top: 0 !important;
  }

  > *:last-child {
    margin-bottom: 0 !important;
  }

  a:link,
  a:visited {
    color: $primary;
  }

  // Anchors like <a name="examples">. These sometimes end up wrapped around
  // text when users mistakenly forget to close the tag or use self-closing tag
  // syntax. We don't want them to appear like links.
  // FIXME: a:not(:link):not(:visited) would be a little clearer here (and
  // possibly faster to match), but it breaks styling of <a href> elements due
  // to https://bugs.webkit.org/show_bug.cgi?id=142737.
  a:not([href]) {
    color: inherit;
    text-decoration: none;
  }

  // Link Colors
  .absent {
    color: $primary;
  }

  p,
  blockquote,
  ul,
  ol,
  dl,
  table,
  pre {
    margin-top: 0;
    margin-bottom: $spacer-3;
  }

  hr {
    height: 4px;
    padding: 0;
    margin: $spacer-4 0;
    border: 0;
    background: #e0e0e0;
  }

  blockquote {
    padding: 0 1em;
    color: $text-gray-light;
    border-left: 0.25em solid #eee;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }

    p {
      margin-bottom: 0;
    }
  }

  kbd {
    display: inline-block;
    padding: 3px 5px;
    font-size: 11px;
    line-height: 10px;
    color: $text-gray;
    vertical-align: middle;
    background-color: #f7f7f7;
    border: solid 1px darken(#f0f0f0, 4%);
    border-bottom-color: #f0f0f0;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #f0f0f0;
  }

  code,
  tt {
    padding: 0 0.4em;
    font-size: 100%;
    background-color: rgba($black, 0.05);
    border-radius: 1px;
    border: 0px;
    display: inline-block;

    br {
      display: none;
    }
  }

  del {
    background: transparent;
    text-decoration: line-through;
  }
  ins {
    background: #d6ffcb;
    text-decoration: none;
  }

  del code {
    text-decoration: inherit;
  }

  pre {
    word-wrap: normal;

    // Code tags within code blocks (<pre>s)
    > code {
      padding: 0;
      margin: 0;
      font-size: 100%;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0;
    }
  }

  .highlight {
    margin-bottom: $spacer-3;

    pre {
      margin-bottom: 0;
      word-break: normal;
    }
  }

  .highlight pre,
  pre {
    padding: $spacer-3;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: $gray-100;
    border-radius: $border-radius;
  }

  pre code,
  pre tt {
    display: inline;
    max-width: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;
  }

  // Headings
  & > h1:first-child,
  & > h2:first-child,
  & > h3:first-child,
  & > h4:first-child,
  & > h5:first-child,
  & > h6:first-child {
    padding-top: 0px !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: $spacer-4;
    margin-bottom: $spacer-3;
    font-weight: bold;
    line-height: 180%;
    position: relative;

    &:target {
      margin-top: -80px;
      padding-top: 80px;

      a.heading-anchor {
        top: 80px;
      }
    }

    a.heading-anchor {
      display: none;
      position: absolute;
      left: -35px;
      padding-right: 0;
      text-decoration: none;
      color: rgb(155, 155, 155);
      line-height: inherit;
      font-weight: 400;
      width: 35px;
      text-align: center;
      border-bottom: 0;
      font-family: serif;
    }

    &:hover {
      a.heading-anchor {
        display: inline-block;
      }
    }

    tt,
    code {
      font-size: inherit;
    }
  }

  h1 {
    padding-bottom: 0.3em;
    font-size: 2em;
    border-bottom: 1px solid #ddd;
  }

  h2 {
    padding-bottom: 0.3em;
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.25em;
  }

  h4 {
    font-size: 1em;
  }

  h5 {
    font-size: 0.875em;
  }

  h6 {
    font-size: 0.85em;
    color: $text-gray-dark;
  }

  // Images & Stuff
  img {
    max-width: 100%;
    // because we put padding on the images to hide header lines, and some people
    // specify the width of their images in their markdown.
    box-sizing: content-box;
    background-color: #fff;
    cursor: zoom-in;

    &.zoom-in {
      cursor: zoom-out;
      position: fixed;
      top: 0;
      left: 0;
      max-width: 100%;
      z-index: 999999;
    }

    &[align="right"] {
      padding-left: 20px;
    }

    &[align="left"] {
      padding-right: 20px;
    }
  }

  .emoji {
    max-width: none;
    vertical-align: text-top;
    // Override `<img>` styles so Emjois don't clash with zebra striping in our tables
    background-color: transparent;
  }

  .attachment-pdf-preview {
    width: 100%;
    min-height: 640px;
    max-height: 800px;
    height: calc(100vw * 0.75);
  }

  // Lists, Blockquotes & Such
  ul,
  ol {
    padding-left: 2em;

    &.no-list {
      padding: 0;
      list-style-type: none;
    }
  }

  // Did someone complain about list spacing? Encourage them
  // to create the spacing with their markdown formatting.
  // List behavior should be controled by the markup, not the css.
  //
  // For lists with padding between items, use blank
  // lines between items. This will generate paragraphs with
  // padding to space things out.
  //
  // - item
  //
  // - item
  //
  // - item
  //
  // For list without padding, don't use blank lines.
  //
  // - item
  // - item
  // - item
  //
  // Modifying the css to emulate these behaviors merely brakes
  // one case in the process of solving another. Don't change
  // this unless it's really really a bug.
  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    word-wrap: break-all;
  }

  li > p {
    margin: 0 !important;
    padding: 0 !important;
  }

  li + li {
    margin-top: 0.25em;
  }

  ul {
    list-style-type: disc;
    ul {
      list-style-type: square;
      ul {
        list-style-type: circle;
        ul {
          list-style-type: disc;
          ul {
            list-style-type: square;
            ul {
              list-style-type: circle;
            }
          }
        }
      }
    }
  }

  ol {
    list-style-type: decimal;
    ol {
      list-style-type: lower-alpha;
      ol {
        list-style-type: lower-roman;
        ol {
          list-style-type: decimal;
          ol {
            list-style-type: lower-alpha;
            ol {
              list-style-type: lower-roman;
            }
          }
        }
      }
    }
  }

  dl {
    padding: 0;

    dt {
      padding: 0;
      margin-top: $spacer-3;
      font-size: 1em;
      font-style: italic;
      font-weight: bold;
    }

    dd {
      padding: 0 $spacer-3;
      margin-bottom: $spacer-3;
    }
  }

  // Tables
  table {
    display: table;
    width: 100%;
    overflow-x: scroll;

    th {
      font-weight: bold;
    }

    th,
    td {
      padding: 6px 13px;
      border: 1px solid #eee;

      p,
      .paragraph {
        margin-bottom: 0 !important;
      }
    }

    tr {
      background-color: #f7f7f7;
      border-top: 1px solid #eee;

      &:nth-child(2n) {
        background-color: #fff;
      }
    }

    img {
      background-color: transparent;
    }
  }

  .attachment-file {
    display: block;
    position: relative;
    color: #444 !important;

    &:hover {
      background: #f7f7f7;
    }

    &.selected {
      background: #f9f9f9;
    }

    a {
      color: #444 !important;
    }

    .icon-box {
      position: absolute;
      top: 17px;
      left: 11px;
      width: 30px;
      .fas {
        font-size: 28px;
        color: #d5d5d5;
      }
    }
    a.close {
      position: absolute;
      top: 17px;
      right: 4px;
      color: #aaa;
      padding: 0 6px;
      cursor: pointer;

      &:hover {
        color: #333;
      }
    }

    .filename,
    .filesize {
      display: block;
      margin-left: 34px;
      margin-right: 24px;
    }

    .filename {
      @extend .text-overflow;
    }
    .filesize {
      color: rgba(88, 96, 105, 0.31) !important;
    }

    .text-gray {
      color: rgba(88, 96, 105, 0.31) !important;
    }

    border-radius: 2px;
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 8px 10px;
    text-decoration: none;
    margin: 10px 0;
  }

  .plantuml-box {
    text-align: center;
    img {
      max-width: 100%;
    }
  }

  .plantuml-image {
    margin-bottom: 15px;
    background: transparent !important;
  }

  .tex-image {
    vertical-align: middle;
    background: transparent !important;
    margin-bottom: 0;
    display: inline-block;
    padding: 5px;
  }

  video {
    max-width: 100%;
  }

  .user-mention {
    color: lighten($primary, 10%) !important;
    cursor: pointer;

    .mention-name {
      color: $primary !important;
    }

    &.user-mention-active {
      background: #f0f0f0;
    }
  }
  a.user-mention {
    &:hover {
      text-decoration: underline;
    }
  }
}

.highlight {
  background: #ffffff;
}
.highlight .c {
  color: #999988;
  font-style: italic;
} /* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
} /* Error */
.highlight .k {
} /* Keyword */
.highlight .o {
} /* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic;
} /* Comment.Multiline */
.highlight .cp {
  color: #999999;
} /* Comment.Preproc */
.highlight .c1 {
  color: #999988;
} /* Comment.Single */
.highlight .cs {
  color: #999999;
  font-style: italic;
} /* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
} /* Generic.Deleted */
.highlight .gd .x {
  color: #000000;
  background-color: #ffaaaa;
} /* Generic.Deleted.Specific */
.highlight .ge {
  font-style: italic;
} /* Generic.Emph */
.highlight .gr {
  color: #aa0000;
} /* Generic.Error */
.highlight .gh {
  color: #999999;
} /* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
} /* Generic.Inserted */
.highlight .gi .x {
  color: #000000;
  background-color: #aaffaa;
} /* Generic.Inserted.Specific */
.highlight .go {
  color: #888888;
} /* Generic.Output */
.highlight .gp {
  color: #555555;
} /* Generic.Prompt */
.highlight .gs {
} /* Generic.Strong */
.highlight .gu {
  color: #aaaaaa;
} /* Generic.Subheading */
.highlight .gt {
  color: #aa0000;
} /* Generic.Traceback */
.highlight .kc {
} /* Keyword.Constant */
.highlight .kd {
} /* Keyword.Declaration */
.highlight .kp {
} /* Keyword.Pseudo */
.highlight .kr {
} /* Keyword.Reserved */
.highlight .kt {
  color: #445588;
} /* Keyword.Type */
.highlight .m {
  color: #009999;
} /* Literal.Number */
.highlight .s {
  color: #d14;
} /* Literal.String */
.highlight .n {
  color: #008080;
} /* Name.Attribute */
.highlight .na {
  color: #008080;
} /* Name.Attribute */
.highlight .nb {
  color: #0086b3;
} /* Name.Builtin */
.highlight .nc {
  color: #445588;
} /* Name.Class */
.highlight .no {
  color: #008080;
} /* Name.Constant */
.highlight .ni {
  color: #800080;
} /* Name.Entity */
.highlight .ne {
  color: #990000;
} /* Name.Exception */
.highlight .nf {
  color: #333;
} /* Name.Function */
.highlight .nn {
  color: #555555;
} /* Name.Namespace */
.highlight .nt {
  color: #000080;
} /* Name.Tag */
.highlight .nv {
  color: #008080;
} /* Name.Variable */
.highlight .ow {
} /* Operator.Word */
.highlight .w {
  color: #bbbbbb;
} /* Text.Whitespace */
.highlight .mf {
  color: #009999;
} /* Literal.Number.Float */
.highlight .mh {
  color: #009999;
} /* Literal.Number.Hex */
.highlight .mi {
  color: #009999;
} /* Literal.Number.Integer */
.highlight .mo {
  color: #009999;
} /* Literal.Number.Oct */
.highlight .sb {
  color: #d14;
} /* Literal.String.Backtick */
.highlight .sc {
  color: #d14;
} /* Literal.String.Char */
.highlight .sd {
  color: #d14;
} /* Literal.String.Doc */
.highlight .s1 {
  color: #d14;
} /* Literal.String.Double */
.highlight .s2 {
  color: #d14;
} /* Literal.String.Double */
.highlight .se {
  color: #d14;
} /* Literal.String.Escape */
.highlight .sh {
  color: #d14;
} /* Literal.String.Heredoc */
.highlight .si {
  color: #d14;
} /* Literal.String.Interpol */
.highlight .sx {
  color: #d14;
} /* Literal.String.Other */
.highlight .ss {
  color: #219;
} /* Literal.String.Symbol */
.highlight .bp {
  color: #999999;
} /* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080;
} /* Name.Variable.Class */
.highlight .vg {
  color: #008080;
} /* Name.Variable.Global */
.highlight .vi {
  color: #008080;
} /* Name.Variable.Instance */
.highlight .il {
  color: #009999;
} /* Literal.Number.Integer.Long */

/*!
 * GitHub Light v0.4.2
 * Copyright (c) 2012 - 2017 GitHub, Inc.
 * Licensed under MIT (https://github.com/primer/github-syntax-theme-generator/blob/master/LICENSE)
 */
.markdown-body .cm-s-default.CodeMirror {
  color: #24292e;
}
.markdown-body .cm-s-default .CodeMirror-gutters {
  border-right-width: 0;
}
.markdown-body .cm-s-default .CodeMirror-guttermarker {
  color: white;
}
.markdown-body .cm-s-default .CodeMirror-guttermarker-subtle {
  color: #d0d0d0;
}
.markdown-body .cm-s-default .CodeMirror-linenumber {
  color: #959da5;
  padding: 0 16px 0 16px;
}
.markdown-body .cm-s-default .CodeMirror-cursor {
  border-left: 1px solid #24292e;
}
.markdown-body .cm-s-default div.CodeMirror-selected,
.markdown-body .cm-s-default .CodeMirror-line::selection,
.markdown-body .cm-s-default .CodeMirror-line > span::selection,
.markdown-body .cm-s-default .CodeMirror-line > span > span::selection,
.markdown-body .cm-s-default .CodeMirror-line::-moz-selection,
.markdown-body .cm-s-default .CodeMirror-line > span::-moz-selection,
.markdown-body .cm-s-default .CodeMirror-line > span > span::-moz-selection {
  background: #c8c8fa;
}
.markdown-body .cm-s-default .CodeMirror-activeline-background {
}
.markdown-body .cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #222 !important;
}
.markdown-body .cm-s-default {
  font-size: 15px;
  font-family: -apple-system, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  .cm-header {
    color: #222;
    font-size: 1.5em;
  }
  .cm-header-1 {
    font-size: 2em;
  }
  .cm-header-2 {
    font-size: 1.5em;
  }
  .cm-header-3 {
    font-size: 1.3em;
  }
  .cm-header-4 {
    font-size: 1.1em;
  }
}
.markdown-body .cm-s-default .cm-comment {
  color: #6a737d;
}
.markdown-body .cm-s-default .cm-constant {
  color: #005cc5;
}
.markdown-body .cm-s-default .cm-entity {
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: #6f42c1;
}
.markdown-body .cm-s-default .cm-keyword {
  font-weight: bold;
  color: #333;
}
.markdown-body .cm-s-default .cm-storage {
  color: #d73a49;
}
.markdown-body .cm-s-default .cm-string {
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: #1b20e2;
}
.markdown-body .cm-s-default .cm-link {
  color: #111;
}
.markdown-body .cm-s-default .cm-support {
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  color: #005cc5;
}
.markdown-body .cm-s-default .cm-variable {
  color: #008080;
}
.markdown-body .cm-s-default .cm-tag {
  color: #008080;
}
.markdown-body .cm-s-default .cm-def {
  color: #d73a49;
  font-weight: bold;
}

.markdown-body,
.markdown-raw {
  .CodeMirror {
    padding: 16px;
    margin-bottom: 18px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.45;
    font-family: Monaco, monospace;

    .CodeMirror-hscrollbar,
    .CodeMirror-vscrollbar {
      display: none !important;
    }
  }

  .CodeMirror-scroll {
    overflow: hidden !important;
  }
}
